/**
 * 首页品牌弹框组件
 */
<script setup>
import { ref } from 'vue'
import { useBrandStore } from '@/stores/home'

const brandStore = useBrandStore()

const selector = ref('品牌')

const brand = ref('')
const type = ref('')

function beforeOpen() {
  selector.value = '品牌'
  brand.value = ''
  type.value = ''
}

function afterClose() {
  selector.value = '品牌'
  brand.value = ''
  type.value = ''
}
</script>

<template>
  <div id="home-brand-popup">
    <el-dialog
      v-model="brandStore.isShow"
      title="品牌客户"
      top="5vh"
      width="70vw"
      center
      @open="beforeOpen"
      @afterClose="afterClose"
    >
      <div class="brand-select">
        <el-radio-group
          v-model="selector"
          size="large"
          style="margin-right: 2%;"
        >
          <el-radio-button label="品牌"/>
          <el-radio-button label="品牌类型"/>
        </el-radio-group>

        <el-input
          v-model="brand"
          v-show="selector == '品牌'"
          size="large"
          placeholder="请输入品牌"
          style="width: 25%;"
        ></el-input>

        <el-input
          v-model="type"
          v-show="selector == '品牌类型'"
          size="large"
          placeholder="请输入品牌类型"
          style="width: 25%;"
        ></el-input>
      </div>

      <div v-show="selector == '品牌'" class="brand-option">
        <TransitionGroup name="fade">
          <RouterLink
            v-for="item in brandStore.getData()"
            :key="item.brand_no"
            v-show="item.brand_no.includes(brand.toUpperCase())"
            :to="{ name: 'brand', query: { brand: item.brand_no } }"
            @click="brandStore.hidden()"
            class="brand-option-item"
            :style="{ background: item.color == 'Y' ? 'linear-gradient(to right bottom, #2f65ba, #6e41be)' : 'gray' }"
          >
            <span class="brand-option-no">
              {{ item.brand_no }}
            </span>

            <span class="brand-option-desc">
              {{ item.brand_desc }}
            </span>
          </RouterLink>
        </TransitionGroup>
      </div>

      <div v-show="selector == '品牌类型'" class="brand-option">
        <TransitionGroup name="fade">
          <RouterLink
            v-for="item in brandStore.getType()"
            :key="item.brand_type"
            v-show="item.brand_type.includes(type.toUpperCase())"
            :to="{ name: 'type', query: { type: item.brand_type } }"
            @click="brandStore.hidden()"
            class="brand-option-type"
          >
            <span>{{ item.brand_type }}</span>
          </RouterLink>
        </TransitionGroup> 
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#home-brand-popup {
  --el-color-primary: green;
  --el-bg-color: rgba(45, 54, 83, 0.8);

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .brand-select {
    margin-left: 1%;
    margin-bottom: 1%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .el-radio-button {
      --el-radio-button-checked-bg-color: #555;
      --el-radio-button-checked-text-color: white;
      --el-radio-button-checked-border-color: #555;
      --el-radio-button-disabled-checked-fill: gray;
    }

    &:deep(.el-radio-button__inner) {
      color: white;
      background-color: #555;
      border-color: black;
    }

    &:deep(.is-active .el-radio-button__inner) {
      color: black;
      background-color: #ddd;
    }
  }

  &:deep(.el-input__wrapper) {
    background-color: black;
  }

  &:deep(.el-input__inner) {
    color: #ccc;
  }

  .brand-option {
    max-height: 72vh;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    position: relative;

    .brand-option-item {
      width: 18%;
      height: 20vh;
      margin: 1%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-radius: 2vh;
      cursor: pointer;
      transition: all 0.25s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px white;
        filter: hue-rotate(15deg) saturate(200%);
      }

      .brand-option-no {
        color: white;
        font-size: 8vh;
        font-weight: normal;
        margin-top: 10%;
        margin-bottom: 5%;
      }

      .brand-option-desc {
        max-width: 100%;
        color: white;
        font-size: 2vh;
        font-weight: normal;
        text-align: center;
        overflow-wrap: break-word;
      }
    }

    .brand-option-type {
      width: 31%;
      height: 10vh;
      margin: 1%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 2.5vh;
      font-weight: normal;
      text-align: center;
      overflow-wrap: break-word;
      background: linear-gradient(to right bottom, #2f65ba, #6e41be);
      border-radius: 2vh;
      cursor: pointer;
      transition: all 0.25s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px white;
        filter: hue-rotate(15deg) saturate(200%);
      }
    }
  }

  .fade-enter-active, .fade-leave-active, .fade-move {
    transition: all 0.25s ease-in-out;
  }

  .fade-enter-from, .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to, .fade-leave-from {
    opacity: 1;
  }

  .fade-leave-active {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>